<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [114.30, 30.50],
                pitch: 30,
                zoom: 12,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        var data = {
            "type": "FeatureCollection",
            "features": [
                {
                    type: "Feature",
                    "geometry": {
                        "type": "LineString",
                        "coordinates": [
                            [114.292975, 30.488542],
                            [114.29292, 30.493947],
                            [114.293779, 30.498206],
                            [114.299404, 30.498046],
                            [114.302326, 30.497993]
                        ]
                    }
                }
            ]

        }
        scene.on('loaded', () => {
            const layer = new L7.LineLayer({
                blend: "normal"
            })
                .source(data)
                .shape('arc3d')
                .size(2)
                .color('#ff2d51')
                .animate({
                    trailLength: 1, // 流线长度
                    interval: 0.25, // 实现流线的间隔,分两段执行完流线
                    duration: 4, // 每段轨迹执行的时间

                })
            scene.addLayer(layer)
        });
    </script>
</body>

</html>